<template>
  <div>
    <div v-if="showPage" class="container auth-page">
      <div class="tips-t pad-t-6 pad-b-6 pad-l-15 pad-r-15">温馨提示：根据国家法律规定和为了保障您个人的财产资金安全，提现账户必须进行实名认证。</div>
      <div v-if="memberInfo" class="panel panel-box pad-l-15 pad-r-15">
        <div class="flex v-align-c div-input font-16 font-color-6 pad-t-14 pad-b-16">
          <div class="font-w">真实姓名</div>
          <div class="flex-item text-align-r">{{ memberInfo.name ? memberInfo.name : '未填写' }}</div>
        </div>
        <div class="flex v-align-c div-input font-16 font-color-6 pad-t-14 pad-b-16">
          <div class="font-w">证件类型</div>
          <div class="flex-item text-align-r">{{ memberInfo.identityCardNo ? '身份证' : '未填写' }}</div>
        </div>
        <div class="flex v-align-c div-input font-16 font-color-6 pad-t-14 pad-b-16">
          <div class="font-w">证件号码</div>
          <div class="flex-item text-align-r">{{ memberInfo.identityCardNo ? memberInfo.identityCardNo : '未填写' }}</div>
        </div>
        <div class="flex v-align-c div-input font-16 font-color-6 pad-t-14 pad-b-16">
          <div class="font-w">绑定手机</div>
          <div class="flex-item text-align-r">{{ memberInfo.phone ? memberInfo.phone : '未填写' }}</div>
        </div>
        <div class="flex v-align-c div-input font-16 font-color-6 pad-t-14 pad-b-16">
          <div class="font-w">银行卡号</div>
          <div class="flex-item text-align-r">{{ memberInfo.card ? memberInfo.card : '未填写' }}</div>
        </div>
        <div class="flex v-align-c div-input font-16 font-color-6 pad-t-14 pad-b-16">
          <div class="font-w">电子协议</div>
          <div class="flex-item text-align-r">{{ memberInfo.contractNo ? '已签约' : '未签约' }}</div>
        </div>
      </div>
      <div v-if="editFlag" class="submit-btn">
        <button @click="save" class="p-button">编辑修改</button>
      </div>
    </div>
    <div v-if="!showPage" class="pad-t-30 mar-t-30 flex-center">页面开发中</div>
  </div>
</template>

<script>
  import { getMemberInfo } from '@/api/pay'

  export default {
    components: { },
    data() {
      return {
        infoDetail: {},
        statusTitle: '',
        statusDesc: '',
        memberInfo: {
          name: '',
          identityNo: '',
          phone: '',
          bandNumber: '',
          signContract: ''
        },
        showPage: true,
        editFlag: true
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    onShow() {
      if (this.getShowBuyCard === '' || this.getShowBuyCard === undefined || this.getShowBuyCard === false) {
        this.$pt.setNavigationBarTitle({
          title: ''
        })
        this.showPage = false
      }
      this.getMemberInfo()
    },
    mounted() {
    },
    methods: {
      getMemberInfo() {
        getMemberInfo(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.memberInfo = response.data
          if (this.memberInfo.name && this.memberInfo.identityCardNo && this.memberInfo.phone && this.memberInfo.card && this.memberInfo.contractNo) {
            this.editFlag = false
          }
        }).catch(() => {
        })
      },
      save() {
        this.$pt.navigateTo({url: '/pages/home/verify-auth/allin-bind/main'})
      }
    }
  }
</script>

<style lang="less" scoped>
  .container{
    background: #fff;
    min-height: calc(100vh);
  }
  .status-bar{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 30;
    text-align: center;
    padding: 1px 0 3px 0;
    h2{
      font-size: 15px;
      font-weight: normal;
      margin: 0;
      padding: 0;
    }
    p{
      font-size: 12px;
      margin-top: -3px;
    }
    &.status-1{
      background: #818181;
      color: #fff;
    }
    &.status-2{
      background: #04c160;
      color: #fff;
    }
    &.status-3{
      background: #ff4a4a;
      color: #fff;
    }
  }
  .disabledRead{
    opacity: 0.5;
  }
  .select-bar{
    border: #9e9e9e 1px solid;
    padding: 4px 8px;
    color: #818181;
    .icon-arrow-right{
      color: #9e9e9e;
      transform:rotate(90deg);
    }
  }
  .select-local{
    border: #9e9e9e 1px solid;
    border-radius: 100px;
    padding: 5px 6px;
    label{
      font-size: 10px;
      color: #9e9e9e;
      display: block;
      width: 45px;
      margin-left: 5px;
    }
  }
  .submit-btn{
    position: fixed;
    left: 0;
    bottom: 85px;
    width: 100%;
    padding: 0 66px;
    box-sizing: border-box;
    background: #fff;
    box-sizing: border-box;
    z-index: 20;
  }
  .address-textarea {
    width: 100%;
    line-height: 1.2;
    height: 40px;
  }
  .upload-bar{
    text-align: center;
    width: 140px;
    height: 80px;
    border-radius: 5px;
    box-sizing: border-box;
    border: #aeaeae 1px dashed;
    img{
      display: inline-block;
    }
    label{
      display: block;
      font-size: 12px;
      color: #595959;
      margin-top: -4px;
    }
  }
  .border-b{
    border-bottom: #f1f1f1 1px solid;
  }
  .panel-box{
    border-radius: 0px;
    box-shadow: none;
    border-top: none;
    border-bottom: none;
    margin-left: 0;
    margin-right: 0;
  }
  .p-button{
    display: block;
    border-radius: 100px;
    height: 46px;
    line-height: 46px;
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    text-align: center;
    border: none;
    background: #ffe100;
    &[disabled]{
      color: #595959;
      background: linear-gradient(to right, #dadada, #dadada);
    }
    &:after{
      content: '';
      display: none;
    }
  }
  .tips-t{
    color: #fff;
    font-size: 12px;
    background: #ff4144;
  }
  .s-input-bar{
    // border: #c5c5c5 1px solid;
    // border-radius: 8px;
    font-size: 12px;
    padding: 0 0 0 8px;
    overflow: hidden;
    input{
      width: 70%!important;
    }
    .per-span{
      text-align: right;
      display: block;
      height: 30px;
      line-height: 30px!important;
      padding: 0 8px 0 0;
      margin-right: 0px;
    }
  }
  .tips-content{
    line-height: 1.8;
  }
  .font-gray{
    color: #999999!important;
  }
  .panel-box{
    h2{
      &:before{
        content: '';
        display: inline-block;
        vertical-align: top;
        width: 5px;
        height: 15px;
        background: #f8c400;
        margin: 3px 10px 0 6px;
      }
    }
  }
  .setting input {
    width: 100%;
  }
  .setting textarea {
    width: 100%;
    height: 100px;
  }
  .div-input {
    border-bottom: #f5f5f5 1px solid;
  }
  // .div-input:last-child {
  //   border-bottom: 0;
  // }
</style>
